<template>
  <div class="body">
    <div class="loginbox">
      <div class="flex con">
        <!-- <div class="left-box">
          <el-image :src="'/images/login_bg.png'" class="left-box-img" :fit="'cover'"></el-image>
          <div class="text-content">
              <h3 class="e-m-0">区块链电子劳动合同</h3>
              <h3>签约平台</h3>
              <div class="s_text e-p-t-10">提升合同签署效率</div>
              <div class="s_text">降低虚假合同签署、萝卜章等风险</div>
              <div class="s_text">提供在线司法出证，服务电子签约最后一公里</div>
          </div>
        </div> -->
        <div class="right-box">
          <!-- 这里是主体部分 -->
          <div class="logon">
            <div class="logo">
              <el-image :src="websetting.sitelogoimg" :fit="'contain'" style="width: 70px;height: 78px;"></el-image>
            </div>
            <!-- <h1 class="e-m-b-5">清远高新区</h1>
            <h1 class="e-m-t-0">电子劳动合同信息化服务平台</h1> -->
            <h1 class="e-m-b-15">欢迎使用{{websetting.name}}</h1>
            <div class="inputtext">
              <div class="text-center e-p-b-15">忘记密码</div>
              <el-form :label-position="labelPosition" :rules="rules" ref="form" label-width="80px" :model="form">
                <el-form-item class="inputitem" prop="mobile">
                  <el-input v-model="form.mobile" placeholder="请输入手机号码" prefix-icon="el-icon-phone"></el-input>
                </el-form-item>
                <el-form-item prop="mobilecaptcha" class="inputitem">
                  <el-input v-model="form.mobilecaptcha" placeholder="请输入您接收到的验证码" prefix-icon="el-icon-lock">
                    <template slot="append">
                      <el-button type="primary" @click="getCode" :disabled="getCodeBtn">{{getCodeText}}</el-button>
                    </template>
                  </el-input>
                </el-form-item>
                <!-- <span id="">
                   注意：请输入正确的手机号码
                  </span> -->
              </el-form>
              <div class="bottomtips">
                <el-checkbox v-model="checked" class="tips1">我已知悉并同意接受</el-checkbox>
                <a href="javascript:;" @click="goiframe('/admin/home/privacyPolicy/','用户隐私政策协议')">《用户隐私政策协议》</a>及<a
                  href="javascript:;" @click="goiframe('/admin/home/regAgreement/','用户注册协议')">《用户注册协议》</a>
              </div>
              <el-button type="primary" class="button" :disabled="checked==false" @click="decide" :loading="loading">校验
              </el-button>
              <!-- <div class="e-font-12 text-center e-p-t-15">
                更换了手机号码？
                <nuxt-link :to="'/admin/home/findaccount/'">找回账号</nuxt-link>
              </div> -->
              <div class="e-font-12 text-center e-p-t-15">
                使用已有账号
                <nuxt-link :to="'/login/'">直接登录</nuxt-link>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="footer e-font-14 text-center">
      <a href="https://beian.miit.gov.cn" class="footer"><span>{{websetting.copyright}}</span></a>
    </div>
    <div class="dialogPage">
      <el-dialog :title="iframe.title" :visible.sync="dialogVisible" width="1200px">
        <iframe :src="iframe.link" width="1100px" height="600px" style="border: 0;" ref="iframe"
          class="dialog-text"></iframe>
      </el-dialog>
    </div>
    <div class="dialogCode">
      <el-dialog  title="验证" :visible.sync="dialogVisible2" width="400px" >
        <div class="main" @click="getGuiCode()" style="cursor: pointer;">
          <el-image style="width: 100%; height: auto" :src="countCodeImg" fit="fill" class="images" ref="countCodeImg"></el-image>
        </div>
        <div class="inputCode">
            	<el-input v-model="code" placeholder="请输入图片中的结果" class="input" ></el-input>
              <el-button type="primary" @click="decideCode" class="button e-m-l-15">确 定</el-button>
        </div>
      </el-dialog>
    </div>
    <slider-verify :isShow="sliderVerifyFLag" @touchSliderResult="verifyResult" @refresh="refresh" @close="close" :pintuImg="pintuImg"
    :pintukuai="pintukuai" :ynumber="ynumber" ref="verifyElement"></slider-verify>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        dialogVisible2:false,
        countCodeImg:'',//验证码图片,
        code:"",//发送短信验证码
        url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
        // 判断校验是否成功
        isauth: false,
        input: '',
        labelPosition: 'top',
        checked: true,
        getCodeBtn: false,
        getCodeText: '点击获取验证码',
        loading: false,
        dialogVisible: false,
        // 这是一个对象，注意
        form: {
          mobile: '',
          mobilecaptcha: ''
        },
        rules: {
          mobile: [{
            required: true,
            message: '请填写手机号码',
            trigger: 'blur'
          }],
          mobilecaptcha: [{
            required: true,
            message: '请填写短信验证码',
            trigger: 'blur'
          }]
        },
        iframe: {
          link: '',
          title: ''
        },
        isSend: false,
        // 滑块验证参数
        sliderVerifyFLag: false,
        pintuImg: '',
        pintukuai: '',
        ynumber: 0
      };
    },
    methods: {
      // 获取滑块验证信息
      getSlideCaptch() {
      	this.$axios.get('/SlideCaptch/GetSlideCaptch').then((res) => {
      		this.pintuImg = res.src1
      		this.pintukuai = res.src2
      		this.ynumber = res.ynumber
      		this.form.guid = res.guidid
      		this.sliderVerifyFLag = true
      	})
      },
      // 滑块验证结果回调函数
      verifyResult(oldx) {
      	this.code = Math.round(oldx);
      	this.decideCode()
      },
      // 关闭滑块验证弹窗
      close(state){
      	this.sliderVerifyFLag = state
      },
      // 刷新滑块验证
      refresh(){
      	this.getSlideCaptch();
      },
      decideCode(){
        this.$axios.get('/User/SendCaptcha?mobile='+this.form.mobile+'&guid=' + this.form.guid + '&countresult=' + this.code).then((res) => {
            if(res){
              this.sliderVerifyFLag = false;
              this.isauth = res.isauth
              this.isSend = true
              this.code = ""
              this.$message.success(res.msg);
              	let time = 60
              	let timer = setInterval(()=>{
              		this.getCodeBtn = true
              		--time
              		this.getCodeText = time+'秒后重新获取'
              		if(time == 0){
              			this.getCodeBtn = false
              			this.getCodeText = '点击获取验证码'
              			clearInterval(timer)
              		}
              	},1000)
            }else{
              this.getSlideCaptch();
            }
        }).catch((res) => {
          this.$refs.verifyElement.refreshVerify();
          this.code = ""
        })
      },
      getGuiCode() {
        this.$axios.get('/Captch/GetCountGuid').then((res) => {
          this.form.guid = res.guid;
          if(this.countCodeImg == '') {
            this.countCodeImg = this.baseURL + '/Captch/CountCode?guid=' + res.guid;
          }
          else{
            // this.$refs.countCodeImg.src = this.baseURL + '/Captch/CountCode?guid' + res.guid;
            this.countCodeImg = this.baseURL + '/Captch/CountCode?guid=' + res.guid
            // console.log(this.baseURL + '/Captch/CountCode?guid' + res.guid)
          }
        })
      },
      getCode(){
        // if(this.form.mobile == ''){
        //   this.$message.error('请输入手机号');
        //   return
        // }
        // this.dialogVisible2 = true;
        // this.getGuiCode()
        if (this.form.mobile == '') {
        	this.$message.error('请输入手机号');
        	return
        }
        this.getSlideCaptch()
      },
      decide() {
        this.$refs.form.validate((valid) => {
          if (valid) {
            this.$router.push({
              path: "/home/decidefalse?mobile=" + this.form.mobile + '&findcaptcha=' + this.form.mobilecaptcha
            })
          } else {
            return false;
          }
        })
      },
      goiframe(url, title) {
        this.iframe.link = url;
        this.iframe.title = title;
        this.dialogVisible = true
      }
    }
  }
</script>
<style scoped>
  .dialogPage>>>.el-dialog__body {
    padding: 0px;
  }

  .dialogPage>>>.el-dialog__header {
    padding: 20px 20px 0px;
  }
</style>
<style lang="scss" scoped>
  //   .inputitem >>> .el-form-item__label{
  //   padding: 0px;
  // }
  .dialogCode{
    .main{
        display: flex;
        justify-content: center;
        align-items: center;
        border: 1px solid var(--grey);
    }
    .inputCode{
      margin-top: 20px;
      display: flex;
      align-items: center;
      .input{

      }
      .button{

      }
    }
  }
  .dialog-text {
    padding-left: 48px;
    padding-bottom: 30px;
  }

  .body {
    background-color: var(--light)
  }

  .loginbox {
    width: 1200px;
    height: calc(100vh - 40px);
    margin: 0 auto;
    padding: 20px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;

    .con {
      box-shadow: 0 2px 12px 0 #0000002e;
      // height: 584px;
      .left-box{
        background-color: #f3faff;
        position: relative;

        .text-content{
          position: absolute;
          top: 0;
          width: 100%;
          padding: 93px 50px;
          box-sizing: border-box;
          h3{
            font-size: 28px;
            margin-top: 0;
            margin-bottom: 15px;
            font-weight: inherit;
          }
          .s_text{
            color: var(--gray);
            line-height: 24px;
          }
        }
      }
      .left-box-img {
        transform: scale(0.85);
        width: 470px;
        height: 100%;
      }

      .right-box {
        overflow: hidden;

        .logon {
          height: 100%;
          width: 470px;
          padding: 0px 44px 24px;

          .logo {
            width: 70px;
            height: 70px;
            margin: 0 auto;
            color: var(--red);
            font-size: 70px;
            line-height: 70px;
            padding-top: 24px;
          }
        }
      }
    }

    .header {
      height: 50px;
      width: 100%;

      .img {
        width: 100px;
        height: 50px;
        float: left;
      }
    }

    .logon {
      width: 500px;
      height: 100%;
      background-color: white;
      margin: 0 auto;
      padding: 25px 25px 24px;
      box-sizing: border-box;
      position: relative;

      h1{
        width: 100%;
        text-align: center;
        font-weight: 700;
        font-size: 24px;
        color: #283548;
      }

      .inputtext {
        margin-top: 36px;
        position: relative;

        // .inputitem{
        //   margin-bottom: 5px;
        // }
        span {
          font-size: 12px;
          color: var(--grey);
        }

        // #eyes{
        // 	position: absolute;
        // 	right: 15px;
        // 	top: 253px;
        // 	color: var(--blue);
        //   &:hover{
        //     cursor: pointer;
        //   }
        // }
        .button {
          width: 100%;
          margin: 0 auto;
          margin-top: 15px;
        }

        .bottomtips {
          font-size: 12px;

          .tips1 {}

          span {
            color: black;
          }

          .tips2 {
            text-align: center;
            font-size: 0.75rem;
            margin-top: 0.625rem;

            a {
              cursor: pointer;
            }
          }
        }
      }
    }
  }
</style>
